$activeColor: var(--theme-color);
$normalColor: #e7e7e7;

.radioBox {
  @apply inline-flex items-center text-sm h-fit cursor-pointer;

  .radio {
    @apply relative w-5 h-5 border border-solid inline-block bg-transparent;
    border-radius: 50%;
    border-color: $normalColor;

    &::after {
      @apply absolute;
      width: 0.625rem;
      height: 0.625rem;
      border-radius: 50%;
      left: 0.25rem;
      top: 0.25rem;
      content: '';
      background-color: $normalColor;
    }

    &:hover {
      border-color: $activeColor;
    }

    &.active {
      border-color: $activeColor;

      &::after {
        background-color: $activeColor;
        animation: ripple 0.2s ease forwards;
      }

      @keyframes ripple {
        0% {
          transform: scale(0);
        }

        50% {
          transform: scale(0.5);
        }

        75% {
          transform: scale(0.75);
        }

        100% {
          transform: scale(1);
        }
      }
    }
  }

  .radioInput {
    @apply hidden;
  }
}

// 移动端
@media screen and (max-width: 767px) {
  .radioBox {
    .radio {
      @apply w-4 h-4;

      &::after {
        @apply w-2 h-2;
        left: 0.1875rem;
        top: 0.1875rem;
      }
    }
  }
}
